{{#if this.device.isMobile}}
<div>
    <div style="margin-left: 16px !important; margin-right:16px !important">
        <div class="ui grid row-dropdown-public" style="padding: 0px !important;" >
            <div class="four wide column item-track">
                <UiDropdown @class="d-flex items-center pl-4 mb-2 search selection menu-track">
                    <div class="default">
                        {{t 'Tracks'}}
                    </div>
                    <i class="dropdown icon ic-ddown"></i>
                    <div class="menu">
                        {{#each this.trackList as |track|}}
                        <UiCheckbox @class="item" @label={{track.name}} @checked={{if (includes this.activeTrack
                            track.name) " active"}} @onChange={{action trackFilter track.name }} />
                        {{/each}}
                    </div>
                </UiDropdown>
            </div>
            <div class="four wide column item-room">
                <UiDropdown @class="d-flex items-center pl-4 mb-2 search selection menu-room">
                    <div class="default">
                        {{t 'Rooms'}}
                    </div>
                    <i class="dropdown icon ic-ddown"></i>
                    <div class="menu">
                        {{#each this.microlocationList as |room|}}
                        {{#if (not room.hiddenInScheduler)}}
                        <UiCheckbox @class="item" @label={{room.name}} @checked={{if (includes this.activeRoom room.name) " active"
                            }} @onChange={{action roomFilter room.name }} />
                        {{/if}}
                        {{/each}}
                    </div>
                </UiDropdown>
            </div>
            <div class="four wide column item-session-type">
                <UiDropdown @class="d-flex items-center pl-4 mb-2 search selection menu-type">
                    <div class="default">
                        {{t 'Types'}}
                    </div>
                    <i class="dropdown icon ic-ddown"></i>
                    <div class="menu">
                        {{#each this.sessionTypeList as |sessionType|}}
                        <UiCheckbox @class="item" @label={{sessionType.name}} @checked={{if (includes this.activeSession
                            sessionType.name) " active" }} @onChange={{action this.sessionFilter sessionType.name}} />
                        {{/each}}
                    </div>
                </UiDropdown>
            </div>
            {{#if this.hasSessionLevel}}
                <div class="four wide column item-session-level">
                    <UiDropdown @class="d-flex items-center pl-4 mb-2 search selection menu-level">
                        <div class="default">
                            {{t 'Levels'}}
                        </div>
                        <i class="dropdown icon ic-ddown"></i>
                        <div class="menu">
                            {{#each this.levels as |level|}}
                            <UiCheckbox @class="item" @label={{level.name}} @checked={{if (includes this.activeSessionLevel
                                level.name) " active" }} @onChange={{action this.sessionLevelFilter level.name}} />
                            {{/each}}
                        </div>
                    </UiDropdown>
                </div>
            {{else}}
                {{#if this.languageList}}
                    <div class="four wide column item-session-level">
                        <UiDropdown @class="d-flex items-center pl-4 mb-2 search selection menu-type">
                            <div class="default">
                                {{t 'Langs'}}
                            </div>
                            <i class="dropdown icon ic-ddown"></i>
                            <div class="menu">
                                {{#each this.languageList as |language|}}
                                    <UiCheckbox @class="item" @label={{language.name}} @checked={{if (includes this.activeLanguage
                                        language.name) "active" }} @onChange={{action this.languageFilter language.name}} />
                                {{/each}}
                            </div>
                        </UiDropdown>
                     </div>
                {{/if}}
            {{/if}}
        </div>
    </div>
    {{#if this.hasSessionLevel}}
        <div class="four wide column item-track">
            {{#if this.languageList}}
                <UiDropdown @class="d-flex items-center pl-4 mb-2 search selection menu-type">
                    <div class="default">
                        {{t 'Languages'}}
                    </div>
                    <i class="dropdown icon ic-ddown"></i>
                    <div class="menu">
                        {{#each this.languageList as |language|}}
                            <UiCheckbox @class="item" @label={{language.name}} @checked={{if (includes this.activeLanguage
                                language.name) "active" }} @onChange={{action this.languageFilter language.name}} />
                        {{/each}}
                    </div>
                </UiDropdown>
            {{/if}}
        </div>
    {{/if}}
    {{#if (or this.router.currentRoute.queryParams.track  this.router.currentRoute.queryParams.room this.router.currentRoute.queryParams.sessionType this.router.currentRoute.queryParams.level)}}
        <div class="ui mb-2">
            {{#if this.router.currentRoute.queryParams.track}}
                <div class="pl-4 mb-2" style="background: #E0E1E2 none; opacity: 0.8;">
                    {{t 'Track'}}:
                    <strong>
                        {{#each this.activeTrack as |track index|}}
                        {{if index ", "}}{{track}}
                        {{/each}}
                    </strong>
                    <LinkTo @route="public.sessions" @models={{array this.event.id}} @query={{hash track=null}}
                        @invokeAction={{action this.removeActiveTrack}}>
                        <span class="ui button pl-2 pr-2">{{t '[Clear Filter]'}}</span>
                    </LinkTo>
                </div>
            {{/if}}
            {{#if this.router.currentRoute.queryParams.room}}
                <div class="pl-4 mb-2" style="background: #E0E1E2 none; opacity: 0.8;">
                    {{t 'Room'}}:
                    <strong>
                        {{#each this.activeRoom as |room index|}}
                        {{if index ", "}}{{room}}
                        {{/each}}
                    </strong>
                    <LinkTo @route="public.sessions" @models={{array this.event.id}} @query={{hash room=null}}
                        @invokeAction={{action this.removeActiveRoom}}>
                        <span class="ui button pl-2 pr-2">{{t '[Clear Filter]'}}</span>
                    </LinkTo>
                </div>
            {{/if}}
            {{#if this.router.currentRoute.queryParams.sessionType}}
                <div class="pl-4 mb-2" style="background: #E0E1E2 none; opacity: 0.8;">
                    {{t 'Session Type'}}:
                    <strong>
                        {{#each this.activeSession as |activeSession index|}}
                        {{if index ", "}}{{activeSession}}
                        {{/each}}
                    </strong>
                    <LinkTo @route="public.sessions" {{action this.removeActiveSession}} @models={{array this.event.id}}
                        @query={{hash sessionType=null}}>
                        <span class="ui button pl-2 pr-2">{{t '[Clear Filter]'}}</span>
                    </LinkTo>
                </div>
            {{/if}}
            {{#if this.router.currentRoute.queryParams.level}}
                <div class="pl-4 mb-2" style="background: #E0E1E2 none; opacity: 0.8;">
                    {{t 'Session Level'}}:
                    <strong>
                        {{#each this.activeSessionLevel as |sessionLevel index|}}
                        {{if index ", "}}{{sessionLevel}}
                        {{/each}}
                    </strong>
                    <LinkTo @route="public.sessions" {{action this.removeActiveSessionLevel}} @models={{array this.event.id}}
                        @query={{hash level=null}}>
                        <span class="ui button pl-2 pr-2">{{t '[Clear Filter]'}}</span>
                    </LinkTo>
                </div>
            {{/if}}
        </div>
    {{/if}}
    {{#if this.router.currentRoute.queryParams.language}}
        <div class="pl-4 mb-2" style="background: #E0E1E2 none; opacity: 0.8;">
            {{t 'Language'}}:
            <strong>
                {{#each this.activeLanguage as |activeLanguage index|}}
                {{if index ", "}}{{activeLanguage}}
                {{/each}}
            </strong>
            <LinkTo @route="public.sessions" @models={{array this.event.id}}
                {{action this.removeActiveLanguage}}
                @query={{hash language=null}}>
                <span class="ui button pl-2 pr-2">{{t '[Clear Filter]'}}</span>
            </LinkTo>
        </div>
    {{/if}}
</div>
{{else}}
<div>
    <h4>
        {{t 'Tracks'}}
        <LinkTo @route="public.sessions" @models={{array this.event.id}} @query={{hash track=null}}
            data-tooltip="{{t 'Clear Track Filter'}}" @invokeAction={{action this.removeActiveClass 'track' }}>
            <Icons::ClearFilter />
        </LinkTo>
    </h4>
    {{#each this.trackList as |track|}}
        <p role="button" class="track p-1 mb-1 link-item {{if (includes-filter this.activeTrack track.name) " active"}}"
            {{action 'applyFilter' track.name 'track' }}>
            <i class="circle icon" style={{css color=track.color}}></i>
            {{track.name}}
        </p>
    {{/each}}
    <h4>
        {{t 'Rooms'}}
        <LinkTo @route="public.sessions" @models={{array this.event.id}} @query={{hash room=null}}
            data-tooltip="{{t 'Clear Room Filter'}}" @invokeAction={{action this.removeActiveClass 'room' }}>
            <Icons::ClearFilter />
        </LinkTo>
    </h4>
    {{#each this.microlocationList as |room|}}
        {{#if (not room.hiddenInScheduler)}}
            <p class="room p-1 mb-1 link-item {{if (includes-filter this.activeRoom room.name) " active"}}" role="button"
                {{action 'applyFilter' room.name 'room' }}>
                {{room.name}}
            </p>
        {{/if}}
    {{/each}}
    <h4>
        {{t 'Session Types'}}
        <LinkTo @route="public.sessions" {{action this.removeActiveSession}} @models={{array this.event.id}}
            @query={{hash sessionType=null}} data-tooltip="{{t 'Clear Session Type Filter'}}">
            <Icons::ClearFilter />
        </LinkTo>
    </h4>
    {{#each this.activeSession as |session|}}
        {{#if this.router.currentRoute.queryParams.sessionType}}
            <span class="p-1 mb-1 rounded-default">
                {{session}}
            </span>
        {{/if}}
    {{/each}}
    <UiDropdown @class="d-flex items-center pl-4 mb-2 search selection min-width-0">
        <div class="default">
            {{t 'Select Session Type'}}
        </div>
        <i class="dropdown icon"></i>
        <div class="menu">
            {{#each this.sessionTypeList as |sessionType|}}
                <UiCheckbox @class="item" @label={{sessionType.name}} @checked={{if (includes this.activeSession
                    sessionType.name) "active" }} @onChange={{action this.sessionFilter sessionType.name}} />
            {{/each}}
        </div>
    </UiDropdown>
    {{#if this.hasSessionLevel}}
        <h4>
            {{t 'Session Levels'}}
            <LinkTo @route="public.sessions" {{action this.removeActiveSessionLevel}} @models={{array this.event.id}}
                @query={{hash level=null}} data-tooltip="{{t 'Clear Session Level Filter'}}">
                <Icons::ClearFilter />
            </LinkTo>
        </h4>
        {{#each this.activeSessionLevel as |level|}}
            {{#if this.router.currentRoute.queryParams.level}}
                <span class="p-1 mb-1 rounded-default">
                    {{level}}
                </span>
            {{/if}}
        {{/each}}
        <UiDropdown @class="d-flex items-center pl-4 mb-2 search selection min-width-0">
            <div class="default">
                {{t 'Select Session level'}}
            </div>
            <i class="dropdown icon"></i>
            <div class="menu">
                {{#each this.levels as |level|}}
                    <UiCheckbox @class="item" @label={{level.name}} @checked={{if (includes this.activeSessionLevel
                        level.name) "active" }} @onChange={{action this.sessionLevelFilter level.name}} />
                {{/each}}
            </div>
        </UiDropdown>
    {{/if}}
    {{#if this.languageList}}
        <h4>
            {{t 'Languages'}}
            <LinkTo @route="public.sessions" {{action this.removeActiveLanguage}} @models={{array this.event.id}}
                @query={{hash language=null}} data-tooltip="{{t 'Clear Language Filter'}}">
                <Icons::ClearFilter />
            </LinkTo>
        </h4>
        {{#each this.activeLanguage as |language|}}
            {{#if this.router.currentRoute.queryParams.language}}
                <span class="p-1 mb-1 rounded-default">
                    {{language}}
                </span>
            {{/if}}
        {{/each}}
        <UiDropdown @class="d-flex items-center pl-4 mb-2 search selection min-width-0">
            <div class="default">
                {{t 'Select Languages'}}
            </div>
            <i class="dropdown icon"></i>
            <div class="menu">
                {{#each this.languageFilterList as |language|}}
                    <UiCheckbox @class="item" @label={{language.name}} @checked={{if (includes this.activeLanguage
                        language.name) "active" }} @onChange={{action this.languageFilter language.name}} />
                {{/each}}
            </div>
        </UiDropdown>
    {{/if}}
</div>
{{/if}}